<template>
  <swiper 
    indicator-dots="true"
    autoplay="true"
    interval="4000"
    duration="600"
    circular="true"
    display-multiple-items="1"
    class="swiper"
  >
    <block
      v-for="(items, urlIndex) in imgUrls"
      :key="urlIndex"
    >
      <swiper-item>
        <image 
          class="slide-image" 
          mode="aspectFit"
          v-for="item in items"
          :key="item._id"
          :src="item.image" 
          @click.stop="bookDetail(item._id)"
        />
      </swiper-item>
    </block>
  </swiper>
</template>

<script>
export default {
  name: 'TopSwiper',
  props: {
    hotList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    imgUrls () {
      let ret = this.hotList
      return [ret.slice(0, 3), ret.slice(3, 6), ret.slice(6, 9)]
    }
  },
  methods: {
    bookDetail (id) {
      wx.navigateTo({
        url: '/pages/detail/main?id=' + id
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .swiper
    margin-top 5px
    .slide-image
      width 33.3%
      height 250rpx
</style>
